<template>
  <div class="padding-lr-xl ">
    <el-card v-if="initData">
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">费用试算</span>
      </div>
      <el-form :model="form" ref="basisForm" :rules="rules" size="mini">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_countryid')}：`"
              label-width="120px"
              prop="countryId"
            >
              <el-select
                size="mini"
                v-model="form.countryId"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in initData.countrysMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_weight')}：`"
              label-width="120px"
              prop="weight"
            >
              <el-input size="mini" v-model="form.weight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_volume')}：`"
              label-width="120px"
            >
              <el-input size="mini" v-model="form.volume"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_timenow')}：`"
              label-width="120px"
            >
              <!-- <el-input size="mini" v-model="form.timeNow"></el-input> -->
              <el-date-picker
                v-model="form.timeNow"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_customerid')}：`"
              label-width="120px"
            >
              <el-select
                size="mini"
                v-model="form.customerId"
                placeholder="请选择"
              >
                <!-- <el-option label="启用" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option> -->
                <el-option
                  v-for="(label, value) in initData.customersMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_customerorg')}：`"
              label-width="120px"
              prop="status"
            >
              <el-select
                size="mini"
                v-model="form.customerOrg"
                placeholder="请选择"
              >
                <el-option
                  v-for="(label, value) in initData.parcelCustomerGroupsMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_customerlevel')}：`"
              label-width="120px"
            >
              <el-select
                size="mini"
                v-model="form.customerLevel"
                placeholder="请选择"
              >
                <el-option
                  v-for="(label, value) in initData.cosutomerLevelMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('querypricedatavo_packproductid')}：`"
              label-width="120px"
            >
              <el-select
                size="mini"
                v-model="form.packProductId"
                placeholder="请选择"
              >
                <el-option
                  v-for="(label, value) in initData.packProductsMaps"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="text-right">
          <el-button type="primary" size="mini" @click="checkData"
            >查询
          </el-button>
        </div>
      </el-form>
    </el-card>

    <el-card class="margin-top" v-if="tableData.length > 0">
      <el-table size="mini" :data="tableData" border tooltip-effect="light">
        <el-table-column prop="packProductName" label="产品名称">
        </el-table-column>
        <el-table-column prop="settleType" label="结算方式">
          <template slot-scope="scope">
            <!-- settleTypesMap -->
            {{ initData.settleTypesMap[scope.row.settleType] }}
          </template>
        </el-table-column>

        <el-table-column
          prop="billingWeight"
          label="计费重量"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="costFormula"
          label="费用公式"
          width="400"
          show-overflow-tooltip
          class="text-cut"
        >
          <template slot-scope="scope">
            <!-- settleTypesMap -->
            <div class="text-cut">
              {{ scope.row.costFormula }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="freight" label="运费(RMB)"></el-table-column>
        <el-table-column prop="operatingFee" label="操作费(RMB)">
        </el-table-column>
        <el-table-column prop="totalCost" label="费用总额(RMB)">
        </el-table-column>
        <el-table-column prop="mostRecent" label="最近时效(工作日)">
        </el-table-column>
        <el-table-column prop="channelDescription" label="渠道说明">
          <template slot-scope="scope">
            <el-popover
              ref="popover1"
              placement="top-start"
              width="200"
              trigger="hover"
              :content="scope.row.channelDescription"
            >
            </el-popover>
            <i class="el-icon-notebook-2" v-popover:popover1></i>
            <!-- <el-button v-popover:popover1 icon></el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import { ajax } from "@/store/yg/common/utils";

export default {
  data() {
    return {
      initData: null,
      tableData: [],
      form: {
        volume: "",
        customerId: "",
        customerOrg: "",
        customerLevel: "",
        timeNow: "",
        // countryId: 8,
        // packProductId: 19,
        // weight: 5
        countryId: "",
        packProductId: "",
        weight: ""
      },
      rules: {
        countryId: [{ required: true, message: "请选择", trigger: "change" }],
        weight: [{ required: true, message: "请填写", trigger: "blur" }]
      }
    };
  },
  methods: {
    async init() {
      const data = await ajax("intQueryPriceFreeData", {});
      console.log(
        "%cdata: ",
        "color: MidnightBlue; background: Aquamarine;",
        data
      );
      this.initData = data.data;
    },
    m(k) {
      return m(k);
    },
    async checkData() {
      const data = await ajax("queryPriceFree", this.form);
      console.log(
        "%cdata: ",
        "color: MidnightBlue; background: Aquamarine;",
        data
      );
      if (data.code === 200) {
        this.tableData = data.data;
      } else {
        this.$message.error(data.message);
        this.tableData = [];
      }
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
.mail {
  text-align: left;
  padding: 0 20px;
}

.subject_all {
  min-height: 360px;
}

/deep/ .el-select,
.el-date-editor.el-input {
  width: 100%;
}
</style>
